import React from "react";
import { Typography, Button, Space } from "antd";
import {
  GithubOutlined,
  MailOutlined,
  LinkedinOutlined,
  WechatOutlined,
} from "@ant-design/icons";
import "./Contact.css";

const { Title, Paragraph } = Typography;

const Contact: React.FC = () => {
  return (
    <div className="contact-section">
      <div className="contact-content">
        <Title level={2} className="section-title">
          联系方式
        </Title>
        <Paragraph className="section-subtitle">
          随时欢迎与我交流，期待与您的对话
        </Paragraph>
        <div className="contact-cards">
          <Space direction="vertical" size={24} className="contact-info">
            <Button
              type="primary"
              size="large"
              icon={<GithubOutlined />}
              className="contact-button github"
            >
              GitHub
            </Button>
            <Button
              type="primary"
              size="large"
              icon={<MailOutlined />}
              className="contact-button email"
            >
              Email
            </Button>
            <Button
              type="primary"
              size="large"
              icon={<LinkedinOutlined />}
              className="contact-button linkedin"
            >
              LinkedIn
            </Button>
            <Button
              type="primary"
              size="large"
              icon={<WechatOutlined />}
              className="contact-button wechat"
            >
              WeChat
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
};

export default Contact;
